<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-09 17:06:41
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-11-08 10:12:53
 * @FilePath: /web/src/components/lineChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="production-page">
    <div class="page-child">
      <!-- <el-dialog
        :title="openModelTitle"
        :visible.sync="openModel"
        width="80%"
        top="5vh"
        class="model-dialog"
        append-to-body
      >
        <model style="height: 75vh" :path="openModelUrl"></model>

        <span slot="footer" class="dialog-footer"> </span>
      </el-dialog> -->
      <el-dialog :title="openModelTitle" :visible.sync="openModel" width="90%" top="5vh" class="model-dialog1"
        append-to-body>
        <div class="box1" style="height: calc(100vh - 300px);">
        <div class="title">产品参数</div>
        <div class="top" v-if="typeName == '钢拱架'">
          <div>产品编号：{{ rowInfo.prodCode }}</div>
          <div>规格：{{ rowInfo.steel }}</div>
          <div>弧长：{{ rowInfo.arcLength }}</div>
          <div>半径：{{ rowInfo.bj }}</div>
          <div>弦高：{{ rowInfo.height }}</div>
        </div>
        <div class="top" v-if="typeName == '网片'">
          <div>产品编号：{{ rowInfo.prodCode }}</div>
          <div>钢筋规格：{{ rowInfo.rebarSpecifications }}</div>
          <div>长：{{ rowInfo.arcLength }}</div>
          <div>宽：{{ rowInfo.prodWide }}</div>
        </div>
        <div class="top" v-if="typeName == '小导管'">
          <div>产品编号：{{ rowInfo.prodCode }}</div>
          <div>长：{{ rowInfo.arcLength }}</div>
          <div>小导管规格：{{ rowInfo.conduitSpecifications }}</div>
          <div>止浆段长度：{{ rowInfo.prodLong }}</div>
        </div>
        <div class="title">生产参数</div>
        <div class="text" v-if="typeName == '钢拱架'">切割机</div>
        <div class="top" v-if="typeName == '钢拱架'">
          <div>
            <div class="left"> 材料厚度：</div><el-input v-model="rowInfo.clhd" size="mini" placeholder="请输入内容"></el-input>
          </div>
          <div>
            <div class="left">半径(中)：</div><el-input v-model="rowInfo.bj" size="mini" placeholder="请输入内容"></el-input>
          </div>
          <div>
            <div class="left">外弧长：</div><el-input v-model="rowInfo.whc" size="mini" placeholder="请输入内容"></el-input>
          </div>
          <div>
            <div class="left"> 配方：</div><el-input v-model="rowInfo.pf" size="mini" placeholder="请输入内容"></el-input>
            <!-- <div class="left">规格：</div> -->
            <!-- <el-input v-model="rowInfo.pf" size="mini" placeholder="请输入内容"></el-input> -->
            <!-- <el-select class="full-width" v-model="rowInfo.pf" size="mini" @change="hanldeChange" placeholder="请选择" clearable>
              <el-option
                v-for="item in dropList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> -->
          </div>
          <div>
            <div class="left">设定产量：</div><el-input v-model="rowInfo.sdcl" size="mini" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="btn" v-if="typeName == '钢拱架'">
          <el-button type="primary" size="small" @click="send('qgjqg')">下发数据</el-button>
          <el-button type="success" size="small" @click="startBtn('qgjqg')">启动</el-button>
          <el-button type="danger" size="small" @click="stopBtn('qgjqg')">停止</el-button>
        </div>
        <div class="text" v-if="typeName == '钢拱架'" style="margin-top: 40px;">焊接机</div>
        <div class="top" v-if="typeName == '钢拱架'">
          <div>
            <div class="left"> 外弦长：</div><el-input v-model="rowInfo.wxc" size="mini" placeholder="请输入内容"></el-input>
          </div>
          <div>
            <div class="left"> 配方：</div><el-input v-model="rowInfo.pf1" size="mini" placeholder="请输入内容"></el-input>
          </div>
          <div>
            <div class="left"> 设定产量：</div><el-input v-model="rowInfo.sdcl1" size="mini" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="btn" v-if="typeName == '钢拱架'">
          <el-button type="primary" size="small" @click="send('ggjhj')">下发数据</el-button>
          <el-button type="success" size="small" @click="startBtn('ggjhj')">启动</el-button>
          <el-button type="danger" size="small" @click="stopBtn('ggjhj')">停止</el-button>
        </div>
        <div class="top" v-if="typeName == '网片'">
          <div>
            <div class="left"> 距离1：</div>{{ rowInfo.jl1 }}
          </div>
          <div>
            <div class="left"> 次数1：</div>{{ rowInfo.cs1 }}
          </div>
          <div>
            <div class="left"> 送丝长度：</div>{{ rowInfo.sscd }}
          </div>
          <div>
            <div class="left"> 距离2：</div>{{ rowInfo.jl2 }}
          </div>
          <div>
            <div class="left"> 次数2：</div>{{ rowInfo.cs2 }}
          </div>
          <div>
            <div class="left"> 当前网格：</div>{{ rowInfo.dqwg }}
          </div>
          <div>
            <div class="left"> 距离3：</div>{{ rowInfo.jl3 }}
          </div>
          <div>
            <div class="left"> 次数3：</div>{{ rowInfo.cs3 }}
          </div>
          <div>
            <div class="left"> 拉网坐标：</div>{{ rowInfo.lwzb }}
          </div>
          <div>
            <div class="left"> 距离4：</div>{{ rowInfo.jl4 }}
          </div>
          <div>
            <div class="left"> 次数4：</div>{{ rowInfo.cs4 }}
          </div>
          <div>
            <div class="left"> 剪网次数：</div>{{ rowInfo.jwcs }}
          </div>
          <div>
            <div class="left"> 距离5：</div>{{ rowInfo.jl5 }}
          </div>
          <div>
            <div class="left"> 次数5：</div>{{ rowInfo.cs5 }}
          </div>
        </div>
        <div class="btn" v-if="typeName == '网片'">
          <el-button type="primary" size="small" @click="send('wp')">下发数据</el-button>
          <el-button type="success" size="small" @click="startBtn('wp')">启动</el-button>
          <el-button type="danger" size="small" @click="stopBtn('wp')">停止</el-button>
        </div>
        <div class="top" v-if="typeName == '小导管'">
          <div>
            <div class="left"> 钢管总长：</div>{{ rowInfo.ggzc }}
          </div>
          <div>
            <div class="left"> 成品长度：</div>{{ rowInfo.cpcd }}
          </div>
          <div>
            <div class="left"> 成品1割孔组数：</div>{{ rowInfo.cp1gkzs }}
          </div>
          <div>
            <div class="left"> 成品1割孔孔数：</div>{{ rowInfo.cp1gkks }}
          </div>
          <div>
            <div class="left"> 成品1尖头长度：</div>{{ rowInfo.cp1jtcd }}
          </div>
          <div>
            <div class="left"> 钢管直径：</div>{{ rowInfo.ggzj }}
          </div>
          <div>
            <div class="left"> 割孔半径：</div>{{ rowInfo.gkbj }}
          </div>
          <div>
            <div class="left"> 毛坯尾料长度：</div>{{ rowInfo.mpwlcd }}
          </div>
          <div>
            <div class="left"> 割枪休息位：</div>{{ rowInfo.gqxxw }}
          </div>
          <div>
            <div class="left"> 成品1尾料长度：</div>{{ rowInfo.cp1wlcd }}
          </div>
          <div>
            <div class="left"> 切割速度：</div>{{ rowInfo.qgsd }}
          </div>
        </div>
        <div class="btn" v-if="typeName == '小导管'">
          <el-button type="primary" size="small" @click="send('xdg')">下发数据</el-button>
          <el-button type="success" size="small" @click="startBtn('xdg')">启动</el-button>
          <el-button type="danger" size="small" @click="stopBtn('xdg')">停止</el-button>
          <el-button type="warning" size="small" @click="resetBtn('xdg')">复位</el-button>
        </div>
      </div>
        <span slot="footer" class="dialog-footer"> </span>
      </el-dialog>
      <div class="model-child1"  v-if="typeName == '钢拱架'">
        <!-- <model style="height: 100%" :path="path" type="'glb'"></model> -->
        <!-- <model-ggj v-if="typeName == '钢拱架'" style="height: 100%" :path="'/models/钢板自动化生产线.glb'" :type="'glb'"></model-ggj>
        <model-wp v-if="typeName == '网片'" style="height: 100%" :path="'/models/网片自动化生产线.glb'" :type="'glb'"></model-wp>
        <model-xdg v-if="typeName == '小导管'" style="height: 100%" :path="'/models/小导管自动化生产线.glb'" :type="'glb'"></model-xdg>
        <model-ljg v-if="typeName == '连接钢板'" style="height: 100%" :path="'/models/型钢自动化生产线.glb'" :type="'glb'"></model-ljg> -->
        
        <!-- <model style="height: 100%" :path="'/models/xdg.glb'" type="'glb'"></model> -->
      </div>
      <div class="model-child2"  v-if="typeName == '网片'">
      </div>
      <div class="model-child3"  v-if="typeName == '小导管'">
      </div>
      <div class="model-child4"  v-if="typeName == '连接钢板'"></div>
      <div class="close" @click="close">
        <i class="el-icon-arrow-down" v-if="!isShow"></i>
        <i class="el-icon-arrow-up" v-if="isShow"></i>
      </div>
      <div class="page-index" v-if="!isShow">
        <div class="left-page">
          <div class="record" style="margin-top: 10px">
            <div class="top">
              <div class="left">
                <img src="../../assets/images/kuohao.png" alt="" />
              </div>
              <div class="right" style="width: 100%">
                <img src="../../assets/images/u193.svg" alt="" />
              </div>
              <div class="text">运维记录</div>
            </div>
            <rollTable :data-list="maintenanceList" :option="maintenanceOption" style="height: 240px" />
          </div>
          <div class="record" style="margin-top: 10px">
            <div class="top">
              <div class="left">
                <img src="../../assets/images/kuohao.png" alt="" />
              </div>
              <div class="right" style="width: 100%">
                <img src="../../assets/images/u193.svg" alt="" />
              </div>
              <div class="text">产品操作台</div>
            </div>
            <rollTable :data-list="productList" :option="productOption" style="height: 257px"
              @rowClick="handleOpenModel">
              <template #prodCode="{ row }">
                <div :style="row.image ? 'color:rgb(0,255,255);cursor:pointer;' : 'color:rgb(0,255,255);cursor:pointer;'">
                  {{ row.prodCode }}
                </div>
              </template>
            </rollTable>
          </div>
        </div>

        <div class="right-page">
          <div class="record" style="margin-top: 10px">
            <div class="top">
              <div class="left">
                <img src="../../assets/images/kuohao.png" alt="" />
              </div>
              <div class="right" style="width: 100%">
                <img src="../../assets/images/u193.svg" alt="" />
              </div>
              <div class="text">产线运行情况</div>
            </div>
            <div class="production">
              <div style="display: flex; align-items: center">
                <div style="width: 250px; height: 240px; margin-left: 70px">
                  <div class="yuan">
                    <div style="position: absolute; left: -80px">
                      <div class="text">{{ typeName }}产线</div>
                      <div class="status">运行中</div>
                    </div>
                    <div class="nei"></div>
                    <div class="nei1"></div>
                    <div class="nei2"></div>
                    <div class="nei3"></div>
                    <div class="nei4" @click="suddenStop">急停</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="record" style="margin-top: 10px">
            <div class="top">
              <div class="left">
                <img src="../../assets/images/kuohao.png" alt="" />
              </div>
              <div class="right" style="width: 100%">
                <img src="../../assets/images/u193.svg" alt="" />
              </div>
              <div class="text">报警详情</div>
            </div>
            <rollTable :data-list="warnList" :option="warnOption" style="height: 257px">
              <template #resolve="{ row }">
                <img v-if="row.isHandle == '0'" style="height: 18px" src="@/assets/images/resolve_no.svg" alt="light" />
                <img v-else style="height: 18px" src="@/assets/images/resolve_yes.svg" alt="light" />
              </template>
            </rollTable>
          </div>
        </div>
      </div>
      <div class="center-page">
        <div>
          <el-button :type="type == 'ggj' ? 'primary' : ''" @click="changeType('ggj')">
            钢拱架
          </el-button>
          <el-button :type="type == 'xdg' ? 'primary' : ''" @click="changeType('xdg')">
            小导管
          </el-button>
          <el-button :type="type == 'wp' ? 'primary' : ''" @click="changeType('wp')">
            网片
          </el-button>
          <el-button :type="type == 'ljg' ? 'primary' : ''" @click="changeType('ljg')">
            连接钢板
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pieChart from "../../components/pieChart/index.vue";
import lineChart from "../../components/lineChart/index.vue";
import rollTable from "../../components/RollTable/index.vue";
import modelGgj from "./model_ggj.vue";
import modelXdg from "./model_xdg.vue";
import modelLjg from "./model_ljg.vue";

import modelWp from "./model_wp.vue";

import model from "./model.vue";
import {
  getProdList,
  listDeviceV2MaintenanceRecords,
  getWarnList,
  sendData,
  start,
  stop,
  reset,
  suddenStop
} from "@/api/bigScreen.js";
import {
  ggjColumn2,
  wpColumn,
  xdgColumn,
  ljgColumn,
  I16_01,
  I16_02,
  I20a,
  I20b
} from "./productionConfig.js";
export default {
  components: {
    pieChart,
    lineChart,
    rollTable,
    modelGgj,
    modelWp,
    modelLjg,
    modelXdg,
    model,
  },
  data() {
    return {
      type: "",
      typeName: "",
      openModel: false,
      openModelTitle: "",
      openModelUrl: "",
      maintenanceList: [], //运维详情
      maintenanceOption: {
        column: [
          {
            prop: "lineName",
            width: 130,
            label: "产线",
          },
          {
            prop: "maintenanceTime",
            width: 150,
            label: "维修保养时间",
          },
          {
            width: 150,
            prop: "maintenanceContent",
            label: "内容",
          },
        ],
      },
      dropList:[],
      //产品参数
      productOption: {
        height: 220,
        column: [],
      },
      productList: [],
      //报警详情
      warnOption: {
        height: 220,
        column: [
          {
            prop: "lineName",
            width: 160,
            label: "产线",
          },
          {
            prop: "warnTime",
            width: 140,
            label: "报警时间",
          },
          {
            width: 140,
            prop: "content",
            label: "报警内容",
          },
          {
            width: 100,
            prop: "resolve",
            label: "是否解决",
          },
        ],
      },
      warnList: [],
      rowInfo: '',
      isShow:false,
      path:'/models/钢板自动化生产线.glb',
    };
  },
  created() {
    this.changeType("ggj");
    
  },
  mounted() { },
  methods: {
    hanldeChange(e){
      console.log(e,this.dropList.find(item=>e==item.value))
      this.rowInfo.arcLength = this.dropList.find(item=>e==item.value).hc
      this.rowInfo.whc = this.dropList.find(item=>e==item.value).hc
      this.rowInfo.bj = this.dropList.find(item=>e==item.value).bj
      this.rowInfo.wxc = this.dropList.find(item=>e==item.value).xg
      this.rowInfo.clhd = this.dropList.find(item=>e==item.value).hd
    },
    handleOpenModel(row) {
      // console.log(row)
      // if (!row.image) return;
      this.openModelTitle = '操作控制台';
      this.rowInfo = row
      if(row.prodCode=='I16-01'){
        this.dropList = I16_01
      }
      if(row.prodCode=='I16-02'){
        this.dropList = I16_02
      }
      if(row.prodCode=='I20a-02'){
        this.dropList = I20a
      }
      if(row.prodCode=='I20a-01'){
        this.dropList = I20a
      }
      if(row.prodCode=='I22b-01'){
        this.dropList = I20b
      }
      if (this.typeName  != '连接钢板') {
        this.openModel = true;
      }
      this.openModelUrl = row.image;
    },
    changeType(type) {
      this.type = type;
      let line =''
      switch (type) {
        case "ggj":
          this.typeName = "钢拱架";
          line='ggj_line'
          this.productOption.column = ggjColumn2;
          this.path = '/models/网片自动化生产线.glb'
          break;
        case "wp":
          this.typeName = "网片";
          line='wp_line'
          this.path = '/models/网片自动化生产线.glb'
          this.productOption.column = wpColumn;
          break;
        case "xdg":
          this.typeName = "小导管";
          line='xdg_line'
          this.path = '/models/小导管自动化生产线.glb'
          this.productOption.column = xdgColumn;
          break;
        case "ljg":
          this.typeName = "连接钢板";
          line='ljg_line'
          this.path = '/models/型钢自动化生产线.glb'
          this.productOption.column = ljgColumn;
          break;
        default:
          break;
      }
      listDeviceV2MaintenanceRecords({ line: line }).then((res) => {
      if (res.data) {
        res.data.forEach((e) => {
          switch (e.line) {
            case "ggj_line":
              e.lineName = "钢拱架生产线";
              break;
            case "wp_line":
              e.lineName = "网片生产线";
              break;
            case "xdg_line":
              e.lineName = "小导管生产线";
              break;
            case "ljg_line":
              e.lineName = "连接钢板生产线";
              break;
            default:
              break;
          }
        });
      }
      this.maintenanceList = res.data;
    });
      getProdList({ prodType: type }).then((res) => {
        this.productList = res.data;
      });
      getWarnList({ line: `${type}_line` }).then((res) => {
        if (res.data) {
          res.data.forEach((e) => {
            e.lineName = `${this.typeName}生产线`;
          });
        }
        this.warnList = res.data;
      });
    },
    send(type) {
      let parm = {}
      if (type == 'wp' || type == 'xdg') {
        parm = {
          prodId: this.rowInfo.id,
        }
      } else {
        parm = {
          prodId: this.rowInfo.id,
          bj: this.rowInfo.bj,
          clhd: this.rowInfo.clhd,
          ggjDeviceType: type,
          sdcl: this.rowInfo.sdcl,
          sdcl1: this.rowInfo.sdcl1,
          whc: this.rowInfo.whc,
          wxc: this.rowInfo.wxc,
          pf:this.rowInfo.pf,
          pf1:this.rowInfo.pf1,
        }
        this.$confirm('确认下发?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sendData(parm).then((res) => {
            if (res.success) {
              this.$message.success('下发成功')
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下发'
          });
        });
      }
      

    },
    startBtn(type) {
      let parm = {}
      if (type == 'wp' || type == 'xdg') {
        parm = {
          prodId: this.rowInfo.id,
        }
      } else {
        parm = {
          prodId: this.rowInfo.id,
          ggjDeviceType: type,
        }
      }
      this.$confirm('确认启动?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        start(parm).then((res) => {
          if (res.success) {
            this.$message.success('启动成功')
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消启动'
        });
      });

    },
    stopBtn(type) {
      let parm = {}
      if (type == 'wp' || type == 'xdg') {
        parm = {
          prodId: this.rowInfo.id,
        }
      } else {
        parm = {
          prodId: this.rowInfo.id,
          ggjDeviceType: type,
        }
      }
      this.$confirm('确认停止?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        stop(parm).then((res) => {
          if (res.success) {
            this.$message.success('停止成功')
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消停止'
        });
      });

    },
    resetBtn() {
      this.$confirm('确认复位?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        reset(this.rowInfo.id).then((res) => {
          if (res.success) {
            this.$message.success('复位成功')
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消复位'
        });
      });
    },
    suddenStop(){
      let type=''
      switch (this.typeName ) {
        case "钢拱架":
          type='ggj'
          break;
        case "网片":
          type='wp'
          break;
        case "小导管":
          type='xdg'
          break;
        case "连接钢板":
          type='ljg'
          break;
        default:
          break;
      }
      this.$confirm('确认急停?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        suddenStop({
          prodType:type
        }).then((res) => {
          if (res.success) {
            this.$message.success('急停成功')
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消复位'
        });
      });
    },
    close(){
      this.isShow=!this.isShow
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog{
    background-color: rgba(19, 43, 82, 0.7);
  }
.model-dialog {

  .el-dialog__title {
    color: #fff;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}

.production-page {
  height: calc(100% - 140px);

  .page-child {
    position: relative;
    width: calc(100% - 100px);
    height: calc(100% - 50px);
    margin: 0px 50px 50px 50px;

    .model-child {
      //background: url(../../assets/images/model40.png);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
      img{
        width:100%;
        height:100%;
        position:absolute;

      }
    }
    .model-child1 {
      background: url(../../assets/images/ggj.png);
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
    }
    .model-child2 {
      background: url(../../assets/images/wp.png);
       background-size: 100% 100%;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
    }
    .model-child3 {
     background: url(../../assets/images/xdg.png);
       background-size: 100% 100%;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
    }
    .model-child4 {
      background: url(../../assets/images/ljg.png);
       background-size: 100% 100%;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
    }


    .page-index {
      position: absolute;
      top: 300px;
      left: 0px;
      width: 100%;
    }
  }

  .ku {
    position: relative;
    margin-left: 4%;
    margin-top: -10px;
    width: 67%;

    img {
      width: 100%;
      height: 90px;
    }

    .text {
      position: absolute;
      color: white;
      top: 12px;
      left: 5px;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
      margin-left: 50px;
      display: flex;
      width: 100%;
    }

    .day {
      margin: 0 70px;
      font-size: 36px;
      color: #ff9900;
    }

    .shu {
      margin-left: 15%;

      .more {
        display: flex;

        img {
          width: 10px;
          height: 22px;
          margin-top: 5px;
        }
      }
    }

    .column {
      font-weight: 700;
      font-style: normal;
      font-size: 28px;
      color: #2de9db;
      margin-top: 10px;
    }
  }

  .left-page {
    width: 400px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;

    .title {
      position: relative;

      .statistics {
        top: 6px;
        left: 10px;
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: #01f7fd;
        position: absolute;
      }
    }
  }

  .right-page {
    width: 400px;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 999;

    .introduce {
      width: 100%;
      height: 258px;
      font-size: 18px;
      color: #fff;
      padding: 10px;
    }
  }

  .center-page {
    width: 500px;
    position: absolute;
    z-index: 999;
    left: calc(50% - 250px);
    bottom: 0px;
    height: 100px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border: 1px solid rgba(2, 231, 243, 1);
    background-color: rgba(19, 43, 82, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;

    .el-button.el-button--primary {
      color: #ffffff;
      background-color: rgb(5, 85, 108);
      border-color: rgb(5, 85, 108);
    }

    .el-button:hover {
      color: rgb(5, 85, 108);
    }

    .el-button.el-button--primary:hover {
      color: #ffffff;
    }

    .el-button {
      color: #ffffff;
      background-color: rgb(170, 170, 170);
      border: none;
    }
  }

  .record {
    border: 1px solid rgba(2, 231, 243, 1);
    background-color: rgba(19, 43, 82, 0.7);

    .top {
      display: flex;
      position: relative;

      .left {
        img {
          position: absolute;
          left: -15px;
          top: 0px;
          width: 30px;
          height: 30px;
        }
      }

      .right {
        img {
          opacity: 0.5;
          margin-top: 0px;
          width: 100%;
          height: 30px;
        }
      }

      .text {
        position: absolute;
        left: 20px;
        top: 3px;
        font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: #00ffff;
      }
    }
  }

  .production {
    .yuan {
      position: relative;
      width: 142px;
      height: 142px;
      background: url("../../assets/images/u416.svg");
      margin: 40px 0 40px 100px;

      .text {
        color: #01f7fd;
        font-size: 16px;
      }

      .status {
        color: #70b603;
        font-size: 14px;
      }

      .nei {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 134px;
        height: 134px;
        background-color: rgb(68, 83, 115);
        border-radius: 50%;
        z-index: 9;
      }

      .nei1 {
        background: url("../../assets/images/u427.svg") no-repeat;
        position: absolute;
        top: 11px;
        left: 11px;
        width: 120px;
        height: 120px;
        z-index: 12;
      }

      .nei2 {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 110px;
        height: 110px;
        background-color: rgb(33, 59, 111);
        border-radius: 50%;
        z-index: 10;
      }

      .nei3 {
        position: absolute;
        top: 34px;
        left: 34px;
        width: 80px;
        height: 80px;
        background: url("../../assets/images/u428.svg") no-repeat;
        z-index: 12;
      }

      .nei4 {
        position: absolute;
        top: 42px;
        left: 42px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: red;
        color: white;
        font-size: 18px;
        line-height: 60px;
        text-align: center;
        z-index: 12;
      }
    }
  }
}

.waring::-webkit-scrollbar {
  width: 2px;
}

/* 滚动条轨道 */
.waring::-webkit-scrollbar-track {
  background: #02e7f3;
  border-radius: 2px;
}

/* 滚动条滑块 */
.waring::-webkit-scrollbar-thumb {
  background: #904149;
  border-radius: 2px;
}

/* 滑块悬停效果 */
.waring::-webkit-scrollbar-thumb:hover {
  background: #b37322;
}

.model-dialog1 div {
  color: white;

  .title {
    font-size: 18px;
    margin: 2vh 0;
    font-weight: bold;
  }

  .top {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    div {
      width: 33%;
      display: flex;
      line-height: 50px;
    }
  }

  .text {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 2vh;
  }

  .btn {
    width: 100%;
    display: flex;
    justify-content: center;

    button {
      width: 120px;
    }
  }
}
.close{
  position: absolute;
  left: -20px;
  width: 20px;
  height: 20px;
  top: 35%;
  color: white;

}
</style>
